<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
		<script src='jquery.min.js'></script>
	</head>
	<body>
		<input type="text" placeholder="请输入商品名字" >
		<button class="add">新增</button>
		<table >
			<tr>
				<td>商品id</td>
				<td>商品名字</td>
				<td>创建日期</td>
				<td >操作</td>
			</tr>
		</table>

		<script>
			function render(list){
				$('table').html('');
				for(var i=0;i<list.length;i++){
					$('table').append(`<tr>
				<td>${list[i].id}</td>
				<td>${list[i].name}</td>
				<td>${list[i].time}</td>
				<td class="del" onclick="del(this)">删除</td>
			</tr>`)
				}
			}
			$.ajax({
				url:'http://10.1.51.144:8989/getList',
				dataType:'json',
				success:function(res){
					
					render(res)
				}
			})
			$('.add').click(function(event) {
				$.ajax({
					url:'http://10.1.51.144:8989/addList',
					dataType:'json',
					method:'post',
					data:{
						name:$('input').val()
					},
					success:function(res){
						render(res)
					}
				})
			});

			function del(a){
				var id=$(a).siblings('td').eq(0).html();
			
				$.ajax({
					url:'http://10.1.51.144:8989/delList',
					type:'get',
					dataType:'json',
					data:{
						id:id
					},
					success:(res)=>{
						console.log(res)
						render(res)
					}
				})
			};
		</script>
	</body>
</html>

